<template>
  <div class="black-Sample-wrap">
    <common-Wrap :name="'黑样本'">
      <template v-slot:content>
        <div class="black-sample-list">
          <div class="black-sample-item" @click="openBlackDialog">
            <div class="item-inner">
              <p class="black-item-num">{{blackNum}}</p>
              <p class="black-item-btn">黑样本数量</p>
            </div>
          </div>
          <div class="black-sample-item" @click="openCaseDialog">
            <div class="item-inner">
              <p class="black-item-num">{{caNum}}</p>
              <p class="black-item-btn">成案数量</p>
            </div>
          </div>
        </div>
      </template>
    </common-Wrap>
    <common-Dialog ref="case_num_dialog">
      <template v-slot:content>
        <common-Form
          :fieldsList="dialogfieldsList"
          :tableHead="dialogTableHead"
          :class="'black-sample-dialog'"
          ref="tableForm"
        >
        </common-Form>
      </template>
    </common-Dialog>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import api from "@/api/common.api";
    export default {
        components: {
            commonDialog,
            commonForm,
            commonWrap,
        },
        data () {
            return {
                caNum: ' ',
                blackNum: '',
                dialogfieldsList: [
                    // {
                    //     type: 'dict',
                    //     code: 'alarmFklx',
                    //     name: '反馈类型',
                    //     placeholder: '请选择',
                    //     options: [
                    //         {
                    //             code: '1',
                    //             name: '🍉'
                    //         },
                    //     ]
                    // },
                ],
                dialogTableHead: [
                    {
                        prop: 'alarmTime',
                        label: '日期',
                        width: 160
                    },
                ],
            }
        },
        methods: {
          getCaseNum () {
              api.getCaseNum().then(res=>{
                  this.caNum = res.content[0].num
              })
          },
          getBlackNum () {
              api.getBlackNum().then(res=>{
                  this.blackNum = res.content[0].num
              })
          },
          openCaseDialog() {
              this.$refs.case_num_dialog.open({title: '成案数量', width: '80%'})
          },
          openBlackDialog() {
              this.$refs.case_num_dialog.open({title: '黑样本', width: '80%'})
          }
        },
        mounted() {
          this.getBlackNum()
          this.getCaseNum()
        }
    }
</script>
<style lang="stylus">
  .black-sample-dialog{

  }
  .black-Sample-wrap{
    margin-top: 20px;
    height: calc(100% - 20px);
    .black-sample-list{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around
      .black-sample-item{
        height: 60%;
        width: calc(50% - 20px);
        background-image: url("../../assets/img/HuaiNanImg/black_bg.png")!important;
        background-size: 100% 100%!important;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .item-inner{
          text-align: center;
          .black-item-num{
            color: #50dbff;
            font-size: 35px;
          }
          .black-item-btn{
            color: #fff;
            background: linear-gradient(to right, #2665e2, #3fb5ff);
            border-radius: 5px;
            padding: 2px 35px;
          }
        }
        +& {
          margin-left: 20px;
        }
      }
    }
  }
</style>
